<template>
    <div class="app-container">
        <h1 style="text-align:center">发布课程</h1>
        <el-steps :active="3" align-center style="margin-bottom: 40px" process-status="wait">
            <el-step title="填写课程基本信息"></el-step>
            <el-step title="创建课程大纲"></el-step>
            <el-step title="发布课程"></el-step>
        </el-steps>
        <div class="info">
            <div class="img">
                <img :src="coursePublishInfo.cover" :alt="coursePublishInfo.title">
            </div>
            <div class="title">
                <h2>{{coursePublishInfo.title}}</h2>
                <p>共{{coursePublishInfo.lessonNum}}课时</p>
                <p>所属分类：{{coursePublishInfo.teacherName}}-{{coursePublishInfo.subjectTitle}}</p>
                <p>课程讲师：{{coursePublishInfo.teacherName}}</p>
                <p>￥ {{coursePublishInfo.price}}</p>
            </div>
        </div>
        <el-button type="default" @click="privious()">返回修改</el-button>
        <el-button type="primary" @click="publish()">发布课程</el-button>
    </div>

</template>
<script>
import courseApi from '@/api/course'
export default {
    data() {
        return {
            courseId:'',
            coursePublishInfo:{}//课程发布信息
        }
    },
    methods: {
        privious() {
            this.$router.push({path:`/course/chapter/${this.courseId}`})
        },
        publish() {
            // 根据课程id调用api将当前的课程状态修改为已发布
            courseApi.publishCourse(this.courseId).then(res=>{
                // 提示成功信息
                this.$message({
                    type:'success',
                    message:'发布成功'
                })
                // 跳转至列表页面
                this.$router.push({path:'/course/list'})
            })
        },
        // 加载课程发布信息
        init(){
            // 根据路由参数获取课程id
            if (this.$route.params && this.$route.params.id) {
                this.courseId = this.$route.params.id
                // 根据课程id通过api获取发布信息
                courseApi.getPublishInfoById(this.courseId).then(res=>{
                    this.coursePublishInfo=res.data
                })
            }
        }
    },
    created(){
        // 初始化页面数据
        this.init()
    }
}
</script>
<style scoped>
.info {
    background-color: #f5f5f5;
    padding: 30px;
    display: flex;
    margin-bottom: 20px;
}
/* .info .img{
    width: 500px;
} */
.info .title {
    margin-left: 20px;
}

.info .title p {
    margin-top: 30px;
}

.info .title p:last-child {
    color: red;
    font-size: 30px;
    font-weight: 600;
}
</style>